<template>
	<uni-popup ref="popup" type="center">
		<view class="popup-container">
			<view class="content"><slot></slot></view>
			<view class="options">
				<u-button class="button cancel" @click="cancel()" shape="circle" :ripple="true" v-if= "cancelshow">{{ cancelText }}</u-button>
				<u-button class="button confirm" @click="$emit('confirm')" shape="circle" :ripple="true">{{ confirmText }}</u-button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	props: {
		confirmText: {
			type: String,
			default: '确定'
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		cancelshow:{
			type: Boolean,
			default: true,
			}
	},
	methods: {
		open() {
			this.$refs.popup && this.$refs.popup.open();
		},
		close() {
			this.$refs.popup && this.$refs.popup.close();
		},
		cancel() {
			this.$emit('cancel');
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-container {
	width: 630upx;
	background: #ffffff;
	border-radius: 30upx;
	padding: 0 40upx;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 100000;
}
.content {
	font-size: 34upx;
	font-weight: 400;
	text-align: center;
	color: #363940;
	margin-top: 70upx;
	word-break: break-all;
	height: auto;
}
.button {
	width: 260upx;
	height: 76upx;
	font-size: 32upx;
	margin: 0;
}
.confirm::after {
	border: none !important;
}
.options {
	display: flex;
	justify-content: space-between;
	margin-top: 55upx;
	margin-bottom: 70upx;
}
.confirm {
	background: $linear-bg;
	color: #ffffff !important;
}
.cancel::after {
	border-color: #d1d1d1;
}
</style>
